class Banner{
    constructor(oRotationBox,oLis){
        this.oRotationBox=oRotationBox;
        this.oLis=oLis;
        this.index=0;
        this.time=null;
    }

    setBgc(){
        this.oRotationBox.style.backgroundImage=`url(img/${this.index}.jpg)`;
    }

    setLisBgc(){
        for(let i=0;i<this.oLis.length;i++){
            if(i == this.index){
                this.oLis[i].style.backgroundColor="#ff6700";
            }else{
                this.oLis[i].style.backgroundColor="#fff";
            }
        }
    }

    next(){
        this.index++;
        if(this.index==oLis.length){
            this.index=0;   
        }
        this.setBgc();
        this.setLisBgc();
    }

    prev(){
        this.index--;
        if(this.index==-1){
            this.index=this.oLis.length-1;   
        }
        this.setBgc();
        this.setLisBgc();
    }

    liFirst(){
        for(let i=0;i<oLis.length;i++){
            oLis[0].style.backgroundColor="#ff6700";
        }
        this.oRotationBox.style.backgroundImage=`url(img/0.jpg)`;
    }

    clickLi(){
        let that=this;
        for(let i=0;i<this.oLis.length;i++){
            this.oLis[i].onclick=function(){
                that.index=i;
                that.setBgc();
                that.setLisBgc();
            }
        }
    }
    //添加定时器
    change(){
		let time = null;
		let that = this;
		time = setInterval(function(){
				that.next();
		},3000);

        oRotationBox.onmouseover=function(){
            clearInterval(time);
        }

        oRotationBox.onmouseout=function(){
            time = setInterval(function(){
				that.next();
		},3000);
        }
    }

    eventBind(){
        let that=this;
        let oNextBtn=document.querySelector(".next-img");
        oNextBtn.onclick=function(){
            that.next();
        }

        let oPrevBtn=document.querySelector(".prev-img");
        oPrevBtn.onclick=function(){
            that.prev();
        }

        this.clickLi();
        this.liFirst();
        this.change();
    }
}

let oRotationBox=document.querySelector(".rotationBox");
let oLis=document.querySelectorAll(".roLis");

let Box=new Banner(oRotationBox,oLis);
Box.eventBind();

//jQuery操作一级菜单
$(".heartSelect ul li span").mouseover(function (){
    $(this).css({
        borderBottom: "5px solid #005aaa",
        color: "#005aaa"
    }).parent().siblings().children().css({
        borderBottom:"none",
        color:"#444444"
    })
})
//jQuery操作二级菜单
$(".heart-01").mouseover(function(){
    $(".heartaa").css({
        display:"block"
    }).siblings().css({
        display:"none"
    })
})

$(".heart-01").mouseout(function(){
    $(".heartaa").css({
        display:"block"
    })
})

$(".heart-02").mouseover(function(){
    $(".heartbb").css({
        display:"block"
    }).siblings().css({
        display:"none"
    })
})

$(".heart-02").mouseout(function(){
    $(".heartbb").css({
        display:"block"
    })
})

$(".heart-03").mouseover(function(){
    $(".heartcc").css({
        display:"block"
    }).siblings().css({
        display:"none"
    })
})

$(".heart-03").mouseout(function(){
    $(".heartcc").css({
        display:"block"
    })
})

$(".heart-04").mouseover(function(){
    $(".heartdd").css({
        display:"block"
    }).siblings().css({
        display:"none"
    })
})

$(".heart-04").mouseout(function(){
    $(".heartdd").css({
        display:"block"
    })
})

$(".heart-05").mouseover(function(){
    $(".heartee").css({
        display:"block"
    }).siblings().css({
        display:"none"
    })
})

$(".heart-05").mouseout(function(){
    $(".heartee").css({
        display:"block"
    })
})

$(".heart-06").mouseover(function(){
    $(".heartff").css({
        display:"block"
    }).siblings().css({
        display:"none"
    })
})

$(".heart-05").mouseout(function(){
    $(".heartff").css({
        display:"block"
    })
})


// 畅销排行
$(".bestSell ul li span").mouseover(function (){
    $(this).css({
        borderBottom: "5px solid #005aaa",
        color: "#005aaa"
    }).parent().siblings().children().css({
        borderBottom:"none",
        color:"#444444"
    })
})

$(".best-01").mouseover(function(){
    $(".frig").css({
        display:"block"
    }).siblings().css({
        display:"none"
    })
})

$(".best-01").mouseout(function(){
    $(".frig").css({
        display:"block"
    })
})

$(".best-02").mouseover(function(){
    $(".wash").css({
        display:"block"
    }).siblings().css({
        display:"none"
    })
})

$(".best-02").mouseout(function(){
    $(".wash").css({
        display:"block"
    })
})

$(".best-03").mouseover(function(){
    $(".airCon").css({
        display:"block"
    }).siblings().css({
        display:"none"
    })
})

$(".best-03").mouseout(function(){
    $(".airCon").css({
        display:"block"
    })
})

$(".best-04").mouseover(function(){
    $(".heatW").css({
        display:"block"
    }).siblings().css({
        display:"none"
    })
})

$(".best-04").mouseout(function(){
    $(".heatW").css({
        display:"block"
    })
})

$(".best-05").mouseover(function(){
    $(".TVs").css({
        display:"block"
    }).siblings().css({
        display:"none"
    })
})

$(".best-05").mouseout(function(){
    $(".TVs").css({
        display:"block"
    })
})

$(".best-06").mouseover(function(){
    $(".hood").css({
        display:"block"
    }).siblings().css({
        display:"none"
    })
})

$(".best-06").mouseout(function(){
    $(".hood").css({
        display:"block"
    })
})

$(".best-07").mouseover(function(){
    $(".gas").css({
        display:"block"
    }).siblings().css({
        display:"none"
    })
})

$(".best-07").mouseout(function(){
    $(".gas").css({
        display:"block"
    })
})

$(".newContent-l").mouseover(function(){
    $(".detailCo1").stop().animate({
        width:"100%",
    },500)
}).mouseout(function(){
    $(".detailCo1").stop().animate({
        width:"10%",
    },500)
})

$(".newList1").mouseover(function(){
    $(".detailCo2").stop().animate({
        width:"100%",
    },500)
}).mouseout(function(){
    $(".detailCo2").stop().animate({
        width:"10%",
    },500)
})

$(".newList2").mouseover(function(){
    $(".detailCo3").stop().animate({
        width:"100%",
    },500)
}).mouseout(function(){
    $(".detailCo3").stop().animate({
        width:"10%",
    },500)
})

$(".newList3").mouseover(function(){
    $(".detailCo4").stop().animate({
        width:"100%",
    },500)
}).mouseout(function(){
    $(".detailCo4").stop().animate({
        width:"10%",
    },500)
})

$(window).scroll(function(){
    if($(window).scrollTop()>4100 && $(window).scrollTop()<4800){
        $(".hairVideo").css({
            transform:"scale(1.265)"
        })
        $("video").trigger("play");
        }else{
        $(".hairVideo").css({
            transform:"scale(1)"
        })
        $("video").trigger("pause");
    }}
)

//轮播图2
    var dex = 0;
    var time=null;

    var arr=[$(".rotation1"),$(".rotation2"),$(".rotation3"),$(".rotation4"),$(".rotation5"),$(".rotation6")]
    
    $(".prev-btn").click(function(){
        dex--;
        for(let i=0;i < arr.length;i++){
            if(dex < 0){
                dex = arr.length;
            }
            arr[dex].show().siblings().hide();
        }
    });

    $(".next-btn").click(function(){
        dex++;
        for(let i=0;i < arr.length;i++){
            if(dex == 5){
                dex = 0;
            }
            arr[dex].show().siblings().hide();
        }
    })

    function go(){
        time=setInterval(function(){
            dex++;
            if(dex==5){
                dex=0;
            }
            arr[dex].show().siblings().hide();
        },4000)
    }

    go();

    $(".popular ul li").mouseover(function(){
        clearInterval(time);
    }).mouseout(function(){
        go();
    });